import {
  Text,
  StyleSheet,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import React, { useState } from "react";
import PageContainer from "@/components/PageContainer";
import useAppStateChange from "@/hooks/useAppStateChange";
import { useRouter } from "expo-router";
import { useTranslation } from "react-i18next";
import { ToastAPI } from "@/components/Toast";
import { getListWithdrawHistoryFn } from "./api";
import dayjs from "dayjs";
export default function Market() {
  const appState = useAppStateChange();
  const router = useRouter();
  const { t } = useTranslation();
  const [currencyData, setCurrencyData] = useState<any[]>([]);

  const getLatestMarketCondition = async () => {
    ToastAPI.loading(t("common.loading"), "center", -1);
    try {
      const historyRes: any = await getListWithdrawHistoryFn({
        pageNo: 1,
        pageSize: 1000,
      });
      ToastAPI.close();
      if (historyRes.code === 0) {
        setCurrencyData(historyRes?.result?.dataList || []);
      } else {
        ToastAPI.error(historyRes?.errMsg || t("common.loadFailed"));
      }
    } catch (error) {
      ToastAPI.close();
      // 捕获错误并关闭加载提示
      ToastAPI.error(JSON.stringify(error) || t("common.loadFailed"));
    }
  };
  React.useEffect(() => {
    getLatestMarketCondition();
  }, []);

  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <TouchableOpacity onPress={() => router.back()}>
            <Image
              source={require("@/assets/images/return-left.png")}
              className="w-[18px] h-[18px]"
            />
          </TouchableOpacity>
          <View className="flex-1 flex-row justify-center">
            <Text className="text-[#fff] text-[18px]">
              {" "}
              {t("history.history_record")}
            </Text>
          </View>
          <View className="w-[18x] h-[18px]"></View>
        </View>
        {currencyData.length > 0 ? (
          <ScrollView
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            style={{ flex: 1 }}
          >
            {currencyData.map((item, indedx) => (
              <View
                className="mt-[22px] bg-[#1C1C1E] rounded-[10px] p-[12px]"
                key={indedx}
              >
                <View className="flex-row justify-between items-center">
                  <View className="flex-1  flex-row gap-[5px]">
                    <Image
                      source={{ uri: item?.logo }}
                      className="w-[25px] h-[25px] rounded-full"
                    ></Image>
                    <View className="flex-row gap-[5px] items-center">
                      <Text className="text-[#fff] text-[16px]">
                        {item?.symbol}
                      </Text>
                    </View>
                  </View>
                  {item?.withdrawStatus == 0 && (
                    <Text className="text-[16px] text-[#FFFF00]">等待提现</Text>
                  )}
                  {item?.withdrawStatus == 1 && (
                    <Text className="text-[16px] text-[#FF3300]">预检失败</Text>
                  )}
                  {item?.withdrawStatus == 2 && (
                    <Text className="text-[16px] text-[#FF3300]">
                      系统执行错误
                    </Text>
                  )}
                  {item?.withdrawStatus == 3 && (
                    <Text className="text-[16px] text-[#FFFF00]">提现中</Text>
                  )}
                  {item?.withdrawStatus == 4 && (
                    <Text className="text-[16px] text-[#FFFF00]">
                      交易已广播
                    </Text>
                  )}
                  {item?.withdrawStatus == 5 && (
                    <Text className="text-[16px] text-[#00FF00]">交易成功</Text>
                  )}
                  {item?.withdrawStatus == 6 && (
                    <Text className="text-[16px] text-[#FF3300]">交易失败</Text>
                  )}
                </View>
                <View className="mt-[10px] flex-row justify-between items-center">
                  <Text className="text-[12px] text-[#949494]">
                    {t("common.time")}：
                    {dayjs(item?.rechargeTime).format("YYYY-MM-DD HH:mm:ss")}
                  </Text>
                  <Text className="text-[12px] text-[#949494]">
                    {t("cast.quantity")}：x{item?.withdrawAmount}
                  </Text>
                </View>
              </View>
            ))}
          </ScrollView>
        ) : (
          <View className="justify-center items-center" style={{ flex: 1 }}>
            <Image
              source={require("@/assets/images/empty.png")}
              className="w-[143px] h-[100px]"
            />
            <Text className="text-[#fff] text-[14px] mt-[10px]">
              {t("common.no_data")}
            </Text>
          </View>
        )}
      </View>
    </PageContainer>
  );
}

const styles = StyleSheet.create({});
